<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="/wechat/css/public.css"/>
    <link rel="stylesheet" type="text/css" href="/wechat/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="/wechat/css/style.css"/>
    <title>我的预约</title>
</head>
<body class="bg">
@if(empty($subs) )
    {{-- <h1 style="margin: .5rem .5rem" class="layui-text">!</h1> --}}
    <div style="position: fixed;top:50%;left: 50%;transform: translate(-50%,-50%);width: 2.2rem;text-align: center;">
        <img src="/wechat/img/bg7.png" style="width: 1.86rem;height: 1.46rem">
        <p style="line-height: 0.3rem;font-size: 0.22rem;color: #666">你还没有预约课程哟～</p>
    </div>
@else
    @foreach($subs as $sub)
        <div class="item">
            <ul class="lie lie1 subscribes" course_info="{{ $sub->course->description }}">
                <li><span>家长姓名：</span>{{ $sub->baby->guardian }}</li>
                <li><span>宝宝姓名：</span>{{ $sub->baby->name }}</li>
                <li><span>宝宝出生日期：</span>{{ $sub->baby->birth  }}</li>
                <li><span>上课时间：</span>{{ $sub->course_time }}</li>
                <li><span>适合月龄段：</span> {{ $sub->course->month_age->title }}</li>
                <li><span>课程主题：</span>{{ $sub->course->name }}<span class="ii1">@if( $sub->course_time < date('Y-m-d H:i:s'))
                            已过期 @else 已预约 @endif</span></li>
            </ul>
        </div>
    @endforeach
@endif

<div id="course_content">
    <div class="cg">
        <span>课程内容</span>
    </div>
    <ul class="lie" id="course_description">
    </ul>
</div>
</body>
<script src="/wechat/js/jquery-2.1.0.js"></script>
<script src="/wechat/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<!--城市选择插件-->
<script src="/wechat/js/LArea.min.js" type="text/javascript" charset="utf-8"></script>
<script src="/wechat/js/LAreaData1.js" type="text/javascript" charset="utf-8"></script>
<script src="/wechat/js/LAreaData2.js" type="text/javascript" charset="utf-8"></script>
<script src="/wechat/js/common.js" type="text/javascript" charset="utf-8"></script>
<script>
    $('.subscribes').on('click', function () {
        var description = $(this).attr('course_info');
        var description_arr = description.match(/[^\r\n]+/g);
        var list =  description_arr.map(function(line){
            return '<li>'+line+'</li>';
        }).join('');
        $course_description = $('#course_description');
        $course_description.html(list);
        layer.open({
            type: 1,
            title: '',
            shadeClose: true,
            area: ['4.8rem', 'auto'],
            content: $('#course_content'),
            isOutAnim: true
        })
    })
</script>
</html>
